<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="adminlistwrap">
      <el-table :data="adminlist" style="width: 100%">
        <el-table-column prop="account" label="账户名" width="180"></el-table-column>
        <el-table-column label="是否可用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.active"
              active-color="#ff9900"
              @change="changeAadminActive(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" circle @click="showEditDialog(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改用户的对话框 -->
      <el-dialog title="修改管理员账户" :visible.sync="dialogShow" width="30%">
        <el-form :model="updateData" :rules="updateRules" ref="updateForm" label-width="100px">
          <el-form-item label="管理员账号" prop="account">
            <el-input v-model="updateData.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="updateData.password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="updateAadmin">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      adminlist: [],
      updateData: {
        _id: "",
        account: "",
        password: "",
        active: ""
      },
      dialogShow: false,
      updateRules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          },
          {
            min: 6,
            max: 9,
            message: "长度在 6 到 9个字符",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 9, message: "长度在 6 到 9个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getadmins() {
      axios.get("/admin/getadminlist").then(res => {
        if (res.data) {
          this.adminlist = res.data;
        }
      });
    },
    changeAadminActive(row) {
      axios.put("/admin/changeactive", row).then(res => {
        console.log("修改成功");
      });
    },
    showEditDialog(data) {
      this.updateData.account = data.account;
      this.updateData.password = data.password;
      this.updateData._id = data._id;
      this.updateData.active = data.active;
      this.dialogShow = true;
    },
    updateAadmin() {
      axios.put("/admin/changeactive", this.updateData).then(res => {
        if (res.data) {
          this.$message({
            showClose: true,
            message: "更改成功",
            type: "success"
          });
          this.dialogShow = false;
          this.getadmins();
        } else {
          console.log("更改失败");
        }
      });
    }
  },
  mounted() {
    this.getadmins();
  }
};
</script>

<style >
.adminlistwrap {
  margin-top: 30px;
}
.el-table th,
.el-table tr {
  background-color: black;
}
</style>